<Modal
  @title="Generate operation token"
  @onClose={{action "onClose"}}
  @isActive={{this.isActive}}
  @type="warning"
  @showCloseButton={{true}}
>
  <section class="modal-card-body">
    {{#if this.encoded_token}}
      <p class="has-bottom-margin-l">
        Below is the process and the values necessary to generate your operation token. Read the instructions carefully!
      </p>
      <div class="has-bottom-margin-m">
        <div class="has-bottom-margin-xl">
          <h4 class="field-title">
            Encoded operation token
          </h4>
          <p class="help has-text-grey has-bottom-margin-xs">
            This is a one-time token that will be used to generate the operation token. Please save it.
          </p>
          <div class="message is-list has-copy-button" tabindex="-1">
            <HoverCopyButton @copyValue={{this.encoded_token}} />
            <code class="is-word-break" data-test-shamir-encoded-token>{{this.encoded_token}}</code>
          </div>
        </div>
        {{#if this.otp}}
          <div class="has-bottom-margin-xl">
            <h4 class="field-title">
              One time password (OTP)
            </h4>
            <p class="help has-text-grey has-bottom-margin-xs">
              This OTP will be used to decode the generated operation token. Please save it.
            </p>
            <div class="message is-list has-copy-button" tabindex="-1">
              <HoverCopyButton @copyValue={{this.otp}} />
              <code class="is-word-break">{{this.otp}}</code>
            </div>
          </div>
        {{/if}}
        <div class="has-bottom-margin-xl">
          <h4 class="field-title">
            DR operation token command
          </h4>
          <p class="help has-text-grey has-bottom-margin-xs">
            {{#if this.otp}}
              This command contains both the encoded token and the OTP. It should be executed on the secondary cluster in
              order to generate the operation token.
            {{else}}
              This command requires the OTP saved earlier. It should be executed on the secondary cluster in order to
              generate the operation token.
            {{/if}}
          </p>
          <div class="message is-list has-copy-button" tabindex="-1">
            {{! template-lint-disable quotes }}
            {{#let
              (if
                this.otp
                (concat 'vault operator generate-root -dr-token -otp="' this.otp '" -decode="' this.encoded_token '"')
                (concat
                  'vault operator generate-root -dr-token -otp="<enter your otp here>" -decode="' this.encoded_token '"'
                )
              )
              as |cmd|
            }}
              <HoverCopyButton @copyValue={{cmd}} />
              <code class="is-word-break">{{cmd}}</code>
            {{/let}}
            {{! template-lint-enable quotes }}
          </div>
        </div>
      </div>
      <div>
        <button type="button" class="button is-primary" {{action "onCancelClose"}}>
          Clear &amp; Close
        </button>
      </div>
    {{else if (and this.generateAction (not this.started))}}
      <form {{action "startGenerate" (hash pgp_key=this.pgp_key) on="submit"}} id="shamir" aria-label="shamir generate form">
        <MessageError @errors={{this.errors}} />
        {{#if (eq this.generateStep "chooseMethod")}}
          <div class="has-bottom-margin-m" data-test-shamir-modal-body>
            {{yield}}
          </div>
          <div class="field is-grouped is-flex-center">
            <div class="control is-flex-row">
              <button type="button" class="link" {{action (mut this.generateWithPGP) true}}>
                Provide PGP Key
              </button>
            </div>
            <div class="control">
              <span class="has-side-padding-s">
                or
              </span>
            </div>
            <div class="control">
              <button type="submit" class="button is-primary" data-test-generate-token-cta>
                Generate operation token
              </button>
            </div>
          </div>
        {{/if}}
        {{#if (eq this.generateStep "providePGPKey")}}
          <div class="has-bottom-margin-m">
            <p>
              Choose a PGP Key from your computer or paste the contents of one in the form below. This key will be used to
              Encrypt the generated operation token.
            </p>
            <PgpFile @index="" @key={{this.pgpKeyFile}} @onChange={{action "setKey"}} />
          </div>
          <div class="field is-grouped">
            <div class="control">
              <button type="button" class="button" {{action "reset"}}>
                Back
              </button>
            </div>
            <div class="control">
              <button type="button" disabled={{not this.pgp_key}} class="button is-primary" {{action "savePGPKey"}}>
                Use PGP Key
              </button>
            </div>
          </div>
        {{/if}}
        {{#if (eq this.generateStep "beginGenerationWithPGP")}}
          <div>
            <p class="has-bottom-margin-m">
              Below is the base-64 encoded PGP Key that will be used to encrypt the generated operation token. Next we'll
              enter portions of the root key to generate an operation token. Click the "Generate operation token" button to
              proceed.
            </p>
            <h4 class="field-title has-bottom-padding-m is-fullwidth">
              PGP Key
              {{this.pgpKeyFile.filename}}
            </h4>
            <div class="message is-list has-copy-button" tabindex="-1">
              <HoverCopyButton @copyValue={{this.pgp_key}} />
              <code class="is-word-break">{{this.pgp_key}}</code>
            </div>
          </div>
          <div class="field is-grouped">
            <div class="control">
              <button type="button" class="button" {{action "reset"}}>
                Back
              </button>
            </div>
            <div class="control">
              <button type="submit" disabled={{and (not this.pgp_key)}} class="button is-primary">
                Generate operation token
              </button>
            </div>
          </div>
        {{/if}}
      </form>
    {{else}}
      <form {{action "onSubmit" (hash key=this.key) on="submit"}} id="shamir" aria-label="shamir form">
        <div class="has-bottom-margin-m">
          {{#if this.errors}}
            <div class="box is-shadowless is-marginless no-padding-top is-fullwidth">
              <MessageError @errors={{this.errors}} />
            </div>
          {{/if}}
          <div class="box is-shadowless is-marginless no-padding-top is-fullwidth no-padding-sides" data-test-form-text>
            {{#if this.otp}}
              <div class="has-bottom-margin-xxl">
                <h4 class="field-title">
                  One-time password (OTP)
                </h4>
                <p class="help has-text-grey has-bottom-margin-xs">
                  This OTP will be used to decode the generated operation token.
                  <span class="has-text-weight-semibold">Save this</span>, as you will need it later to decode the operation
                  token.
                </p>
                <div class="message is-list has-copy-button" tabindex="-1">
                  <HoverCopyButton @copyValue={{this.otp}} />
                  <code class="is-word-break">{{this.otp}}</code>
                </div>
              </div>
            {{/if}}
            <p>
              Generate an operation token by entering a portion of the primary's root key. Once all portions are entered, the
              generated token may be used to manage your secondary Disaster Recovery cluster.
            </p>
          </div>
          <div class="field">
            <label for="key" class="is-label">
              root key Portion
            </label>
            <div class="control">
              <Input class="input" @type="password" name="key" @value={{this.key}} data-test-shamir-input={{true}} />
            </div>
          </div>
        </div>
        <div class="has-bottom-margin-m">
          <div class="columns is-mobile">
            <div class="column is-narrow">
              <button type="submit" class="button is-primary" disabled={{this.loading}} data-test-shamir-submit={{true}}>
                {{if this.generateAction "Generate Token" this.buttonText}}
              </button>
            </div>
            <div class="column is-flex-v-centered is-flex-end">
              {{#if (or this.started this.hasProgress)}}
                <ShamirProgress @threshold={{this.threshold}} @progress={{this.progress}} />
              {{/if}}
            </div>
          </div>
        </div>
      </form>
    {{/if}}
  </section>
  <footer class="modal-card-foot modal-card-foot-outlined">
    <button
      type="button"
      class="button is-secondary"
      onclick={{action "onCancelClose"}}
      data-test-shamir-modal-cancel-button
    >
      {{if this.encoded_token "Close" "Cancel"}}
    </button>
  </footer>
</Modal>